<!--录入第二次补缓考成绩-->
<template>
  <div class="assessment-container" style="width:100%">
    <div class="search-container" style="margin:0">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>二次补考学期:</span>
          <el-select
            v-model="oldxueqi"
            style="width: 120px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>课程负责单位：</span>
          <el-select
            v-model="xb"
            style="width: 120px;margin-right:5px"
            size="mini"
            placeholder="请选择"
            @change="handleXb"
            clearable
          >
            <el-option
             style="margin-right:5px"
              v-for="(item,index) in xbList"
              :key="index"
              :label="item.deptName"
              :value="item.deptName"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="gClass"
            style="width: 120px"
            size="mini"
            placeholder="请选择"
            @change="handleClass"
            clearable
          >
          <!-- @clear="jjBukaoTwo" -->
            <el-option
              v-for="(item,index) in gClassList"
              :key="index"
              :label="item.deptName ? item.deptName : item.value"
              :value="item.deptName ? item.deptName : item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>课程名称：</span>
          <el-input
            style="width: 152px"
            size="mini"
            clearable
            placeholder="请输入内容"
            v-model="coursename"
          ></el-input>
        </div>
        <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="jjBukaoTwo">查 询</el-button> -->
        <div class="search-button" @click="jjBukaoTwo" style="margin:2px 0 0 0">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="plan-entry-table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column
          prop="lrcj"
          label="录入成绩"
          width="141"
          align="center"
          class-name=""
          label-class-name=""
        >
          <template slot-scope="scope">
            <!-- <el-button type="success" icon="el-icon-edit" @click="toMakeupScoreEntry(scope.$index)" size="mini">录入</el-button> -->
            <div class="lucj-import-button">
              <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" />
              <span @click="toMakeupScoreEntry(scope.$index)"
                >录入</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="dc"
          label="导出二次补缓考成绩单"
          width="226"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <el-button type="warning" icon="el-icon-download" @click="getoutBKallCJDD(scope.$index)" size="mini">导出补缓考成绩单</el-button> -->
            <div class="import-button" @click="getoutBKallCJDD(scope.$index)" style="width: 150px;margin:0 auto">
              <img src="../../../assets/assessment/icon-import.png" alt="" />
              <span>导出补缓考成绩单</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="yxueqi"
          label="原考试学期"
          width="110"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="onemorexueqi"
          label="补考学期"
          width="110"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="courseno"
          label="课程编号"
          width="141"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="coursename"
          label="课程名称"
          width="166"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="classes"
          label="教学班"
          width="126"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="proclassname"
          label="专业班次"
          width="326"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="yl" label="应录" width="130" align="center">
        </el-table-column>
        <el-table-column prop="wl" label="未录" width="130" align="center">
        </el-table-column>
        <el-table-column prop="yil" label="已录" width="126" align="center">
        </el-table-column>
      </el-table>
      <div class="block" style="margin-bottom: 50px">
        <el-pagination
          style="width:auto;margin-top: 15px;float:right;margin-bottom:50px;padding:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="cuurrentPage"
          :page-sizes="[5, 10, 20, 30,50,100,200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length > 0 ? tableData[0].tol : ''"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  saveBukaoTwo,
} from "@/api/courseAchievement/scoreentry";
import { reqGetXqList } from "@/api/admin1/check";
import { getxb,getClass,queryXBclassroom,outBKallCJDTwo } from "@/api/course/courses";

export default {
  data() {
    return {
      pageNo:1,
      pageSize:5,
      designcontent: "",
      gClass:"",
      xb:"",
      oldxueqi: "",
      coursename: "",
      xqList: [],
      gClassList:[],
      xbList:[],
      tableData: [],
    };
  },
  mounted() {
    this.termAll();
    this.xbAll();
    this.classAll();
    this.jjBukaoTwo();
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val;
      this.jjBukaoTwo();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.jjBukaoTwo();
    },
    async termAll(){
      const result = await reqGetXqList();
      result.data.code == 200 ? this.xqList = result.data.data : [];
    },
    async xbAll(){
      const xb = await getxb();
      xb.data.code == 200 ? this.xbList = xb.data.data : [];
    },
    async classAll(){
      const gClass = await getClass();
      gClass.data.code == 200 ? this.gClassList = gClass.data.data : [];
    },
    // 教研室下拉框的改变
    handleClass(val){
      if(!val){
        this.xb ? this.handleXb(this.xb)  : this.classAll();
      }
    },
    // 根据系部选中获取教研室
    async handleXb(val){
      if(val){
        const xbClass = await queryXBclassroom(val);
        xbClass.data.code == 200 ? this.gClassList = xbClass.data.data : [];
        this.gClass = ''
      } else {
        this.xbAll();
        this.classAll();
      }
    },
    //导出补缓考成绩
    getoutBKallCJDD(index) {
      let planid1 = this.tableData[index].planid;
      outBKallCJDTwo(planid1).then(res=>{
        if(res.data.type == 'application/json') {
          this.$message({ type: "error", message: '该课程还没有录入成绩' });
        } else {
          const blob = new Blob([res.data]);
          let url = URL.createObjectURL(blob);
          /** 模拟浏览器操作Document，并模拟下载动作 */
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "毕业前补缓考成绩单.doc");
          document.body.appendChild(link);
          link.click();
        }
        // if("success" === res.data.data.code) {
        //   this.$message({
        //     showClose: true,
        //     message: "下载中，请稍后",
        //     type: "success",
        //   });
        //   const downloadURL = window.location.origin + `/api/xpaas-course-service/testscorequery/outBKallCJDTwo?planid1=${planid1}`;
        //   window.open(downloadURL, '_blank'); 
        // } else {
        //   this.$message({ type: "error", message: res.data.data.msg });
        // }
      })
    },
    //查询全部信息
    /* saveBukaoTwo() {
      return new Promise(() => {
        let obj = {
          onemorexueqi: "2020春",
        };
        saveBukaoTwo(obj).then((res) => {
          this.tableData = res.data.data;
          console.log(res.data.data, "res.data.data", 111111);
        });
      });
    }, */
    //按条件查询
    jjBukaoTwo() {
      let obj = {
        Bkstudentlist: this.oldxueqi,
        coursename: this.coursename,
        teachingandresearchsection:this.gClass,
        department:this.xb,
        pageNo:this.pageNo,
        pageSize:this.pageSize
      };
      return new Promise(() => {
        saveBukaoTwo(obj).then((res) => {
          this.tableData = res.data.data;
          this.pageNo = 1;
        });
      });
    },
    //表格点击录入跳转
    toMakeupScoreEntry(index) {
      console.log(index)
      let planid= this.tableData[index].planid
      this.$router.push({
        path: "/admin/scoreManagement/deferredExamination",
        query: { planid:planid },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.plan-entry-table-container {
  margin-top: 15px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .import-button{
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    background: #fef1e8;
    border: 1px solid #f86900;
    color: #f86900;
    img {
      width: 14px;
      height: 14px;
      margin-right: 5px;
      margin-top: 5px;
    }
}

  .lucj-import-button {
    .export-button;
    width: 70px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    box-sizing: border-box;
    margin: 0 auto 12px;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #02c86c;
    }
  }
  .bk-lucj-expot-button {
    .export-button;
    width: 156px;
    background: #fef1e8;
    border: 1px solid #f86900;
    box-sizing: border-box;
    margin: 0 auto 12px;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #f86900;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/entry-results.less";
.plan-entry-table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
